<template>
<div class='lct-center'>
	<comp-title v-if="dataSet.leftCenterTop" :text="dataSet.leftCenterTop.lctCenter.title" ref="compTitle"></comp-title>
	<div class="chart-container" ref="chartContainer">
		<pieChart ref="pieChart" :data="dataSet.leftCenterTop ? dataSet.leftCenterTop.lctCenter.data : []" :colors="colors" class="lc-pie-chart"></pieChart>
	</div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import CompTitle from '@/components/common/compTitle'
import pieChart from '@/components/common/pieChart'
export default {
components: {CompTitle,pieChart},
data() {
return {
	data: [],
  colors: []
};
},
created() {
},
mounted() {
},
computed: {
	...mapState(['dataSet'])
},
watch: {},
methods: {
	handleData() {
		this.colors = this.dataSet.leftCenterTop.lctCenter.colors
	},
	init() {
	  this.handleData()
		let tl = new TimelineMax({})
		let tw1 = TweenMax.from(this.$refs.chartContainer, 0.3, {opacity: 0})
		tl.addLabel('start')
			.add(this.$refs.compTitle.init(), 'start+=0')
			.add(tw1,'start+=0.8')
			.add(this.$refs.pieChart.init, 'start+=1') 
		return tl
	}
},
}
</script>
<style lang='scss' scoped>
  .lct-center {
		width: 100%;
		height: 215px;
		.chart-container {
			width: 100%;
			height: 175px;
		}
	}
</style>